<!-- In this file, I made adjustment to make opening page more proper. In my opinion, working with long horizontal tables is logical idea -->
<!-- For each paragraph and picture, I added  a horizontal table-->
<%@page import="java.util.*,java.text.*"%>
<%@page import="QRCG.DatabaseManager"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User Main Page</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.accordion.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		jQuery('#list1b').accordion({
			autoheight: false
		});
		jQuery('#list2b').accordion({
			autoheight: false
		});
		jQuery('#list3b').accordion({
			autoheight: false
		});
	});
</script>
<script language="javascript">
	function popup(url) {
		var win_dow = window.open(url, 'myPopUp',
				"type=fullWindow, fullscreen,scrollbars=yes");
	}
</script>
</head>

<%@ include file="header.jsp"%>

<%
if (session.getAttribute("nickname") != null) {

session.setAttribute("searchedB", null); %>

<div id="page">
	<div id="page-bgtop">
		<div id="page-bgbtm">
			<div id="content">

				<div class="post">
					<div class="entry">
						<img src="images/QRCodeEx.jpg" class="image" />
					</div>
				</div>
				<div class="post">
					<div class="entry">
						<p>
							<br />Some QR Code reader applications for smart phones: <br />
							<a
								href="http://www.mobile-barcodes.com/qr-code-software/windows/">For
								Windows Mobile</a><br> <a
								href="https://market.android.com/details?id=uk.tapmedia.qrreader&hl=tr">For
								Android</a><br> <a
								href="http://itunes.apple.com/us/app/qr-code-reader-and-scanner/id388175979?mt=8">For
								iPhone</a><br> <a
								href="http://www.symbian-freeware.com/tag-qr_code.html">For
								Symbian</a>


						</p>
					</div>
				</div>

				<div class="post">
					<div class="entry">
						<p>
							<br />A young group of students from Bogazici University are
							proud of being represent a brand new game to you:
						</p>
						<h2 class="title">QR MARKS THE SPOT!</h2>
					</div>
				</div>



				<div class="post">
					<div class="entry">
						<img src="images/QR-Code-Dice.jpg" class="image" />
					</div>
				</div>
				
				<div class="post">
					<div class="entry">
						<img src="images/qrcode_confirmlink.jpg" class="image" />
					</div>
				</div>

				<div class="post">
					<div class="entry">
						<p>
							<br /> <br />QR Marks The Spot is a brand new location based
							game project utilizing QR code readers. Here, you can join
							existing games, or you can create new ones. The games can be
							about numerous fabulous adventures such as treasure hunting and
							hide-and-seek.
						</p>
					</div>
				</div>

				<div class="post">
					<div class="entry">
						<p>Our project is not using technological advancements only,
							it combines real life experience and online technological
							devices. You can create a new game or join an existing one as
							online, and you can just enjoy the game with your friends in a
							beautiful spring day ! The only necessary thing to become a part
							of this platform is to have a mobile device with QR Mark Reader.</p>
					</div>
				</div>

				

				<div class="post">
					<div class="entry">
						<img src="images/classicandmodern.jpg" class="image" />
					</div>
				</div>



				<div style="clear: both;">&nbsp;</div>
			</div>
			<!-- end #content -->
			<div id="sidebar">
				<ul>
					<li>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>TOP ONGOING GAMES</h2>
					</li>

					<li>
						<div class="basic" id="list1b">

							<%
					
							final int  GAME_LIMIT = 5;
	
					  String gameinfo = "";
					  String u ="";
					  String desc = "";
					  DatabaseManager connection = new DatabaseManager();
					  connection.connect();
					  String user_id = (String)session.getAttribute("user_id");
					  DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
					  String formattedDate = df.format(new Date());
					  
					  
					  ArrayList<HashMap<String, Object>> games = new ArrayList<HashMap<String, Object>>();

						games = connection.getSortedGames("rating",formattedDate, GAME_LIMIT);
						
						if (!games.isEmpty()) {
							for (int i = 0; i < games.size(); i++) {
								HashMap<String, Object> map1 = (HashMap<String, Object>) games
										.get(i);
							
								u= "ViewTheGame.jsp?game_id=" + map1.get("game_id");
								
								gameinfo ="Location: " +connection.getGameInformation(DatabaseManager.GameInformation.LOCATION, map1.get("game_id").toString());
								
								desc = (String)map1.get("description");
								if(desc.length() > 250)
								{
									desc = desc.substring(0, 250);
									desc += "...";
								}
								
								gameinfo+="<br>Description: " + desc;
						%>
							<!-- <li><a href="<%=u%>" onMouseover="showit(0,'<%=gameinfo %>')"><%=map1.get("name")%></a></li> -->
							<a><%=map1.get("name")%></a>
							<div>
								<p><%=gameinfo %></p>
								<p style="cursor: pointer; color: #D14836;"
									onclick="javascript:popup('<%=u%>')">Click here for more
									information</p>
							</div>

							<%} } %>
						</div>
					</li>
				</ul>
			</div>
			<!-- end #sidebar -->

			<!-- REGISTERED GAMES -->
			<div id="sidebar">
				<ul>
					<li>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>REGISTERED GAMES</h2>
					</li>

					<li>
						<div class="basic" id="list2b">

							<%

						games = connection.getUserGames(user_id, GAME_LIMIT);
						
						if (!games.isEmpty()) {
							for (int i = 0; i < games.size(); i++) {
								HashMap<String, Object> map1 = (HashMap<String, Object>) games
										.get(i);
							
								u= "ViewTheGame.jsp?game_id=" + map1.get("game_id");
								
								gameinfo ="Location: " +connection.getGameInformation(DatabaseManager.GameInformation.LOCATION, map1.get("game_id").toString());
								
								System.out.println((String)map1.get("description"));
								desc = (String)map1.get("description");
								
								if(desc.length() > 250)
								{
									desc = desc.substring(0, 250);
									desc += "...";
								}
								
								gameinfo+="<br>Description: " + desc;
						%>
							<!-- <li><a href="<%=u%>" onMouseover="showit(0,'<%=gameinfo %>')"><%=map1.get("name")%></a></li> -->
							<a><%=map1.get("name")%></a>
							<div>
								<p><%=gameinfo %></p>
								<p style="cursor: pointer; color: #D14836;"
									onclick="javascript:popup('<%=u%>')">Click here for more
									information</p>
							</div>

							<%} }
						else {%>
							<div>
								<p>
									<font color=#D14836>You haven't registered to any games
										yet!</font>
								</p>
							</div>
							<%}
						%>

						</div>
					</li>
				</ul>
			</div>
			<!-- end #sidebar Registered Games -->

			<!-- CREATED GAMES -->
			<div id="sidebar">
				<ul>
					<li>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>CREATED GAMES</h2>
					</li>

					<li>
						<div class="basic" id="list3b">

							<%

						games = connection.getCreatedGames(user_id, GAME_LIMIT);
						
						if (!games.isEmpty()) {
							for (int i = 0; i < games.size(); i++) {
								HashMap<String, Object> map1 = (HashMap<String, Object>) games
										.get(i);
							
								u= "ViewTheGame.jsp?game_id=" + map1.get("game_id");
								
								gameinfo ="Location: " +connection.getGameInformation(DatabaseManager.GameInformation.LOCATION, map1.get("game_id").toString());
								
								desc = (String)map1.get("description");
								if(desc.length() > 250)
								{
									desc = desc.substring(0, 250);
									desc += "...";
								}
								
								gameinfo+="<br>Description: " + desc;
						%>
							<!-- <li><a href="<%=u%>" onMouseover="showit(0,'<%=gameinfo %>')"><%=map1.get("name")%></a></li> -->
							<a><%=map1.get("name")%></a>
							<div>
								<p><%=gameinfo %></p>
								<p style="cursor: pointer; color: #D14836;"
									onclick="javascript:popup('<%=u%>')">Click here for more
									information</p>
							</div>

							<%} } 
						else {%>
							<div>
								<p>
									<font color=#D14836>You haven't created any games yet!</font>
								</p>
							</div>
							<%}
						%>
						</div>
					</li>
				</ul>
			</div>
			<!-- end #sidebar Created Games -->



			<div style="clear: both;">&nbsp;</div>
		</div>
	</div>
</div>
<!-- end #page -->

<%
	} else {
		response.sendRedirect("index.jsp");
	}
%>

<script language="JavaScript1.2">

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=5

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("onmouse") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which,sub){
clear_delayhide()
thecontent=(which==-1)? "" : sub
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1,'')",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1,'')",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>
<%@ include file="footer.jsp"%>